<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogTableVisible"
      :modal="false"
      :close-on-click-modal="false"
      v-dialogDrags
      width="30%"
      @close="closed"
    >
      <keep-alive>
        <component
          :is="componentId"
          :mapview="mapview"
          :paramObj="paramObj"
          v-if="dialogTableVisible"
          ref="mycomponent"
        ></component
      ></keep-alive>
    </el-dialog>
  </div>
</template>

<script>
import roadDetailPanel from "./road/roadDetailPanel";
import roadsurfaceDataPanel from "./road/roadsurfaceDataPanel";
import roadInceptionDataPanel from "./road/roadInceptionDataPanel";
import roadInceptionDetailPanel from "./road/roadInceptionDetailPanel";
export default {
  components: {
    roadDetailPanel,
    roadsurfaceDataPanel,
    roadInceptionDataPanel,
    roadInceptionDetailPanel,
  },
  provide() {
    return {
      toggleComponent: this.toggleComponent,
    };
  },
  data() {
    return {
      mapview: undefined,
      componentId: "roadDetailPanel",
      paramObj: {},
      dialogTableVisible: false,
      dialogTitle: undefined,
      highlight: undefined,
    };
  },
  created() {
    console.log("created");
  },
  activated() {
    console.log("activated");
    // this.show();
  },
  mounted() {
    console.log("mounted");
    // this.initEditable();
    // this.rowFormData = this.paramObj.detailData;
    // this.featureLayer = this.paramObj.featureLayer;
    // this.show();
  },
  methods: {
    /**
     * @description: 切换组件方法
     * @param {*} componentId  组件名称
     * @param {*} paramObj 组件参数对象
     * @return {*}
     */
    toggleComponent(componentId, paramObj) {
      // this.isMapLoaded = true;

      this.isMapLoaded = false;
      // 在组件移除后，重新渲染组件
      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
      this.$nextTick(() => {
        this.isMapLoaded = true;
        this.paramObj =
          paramObj == null || paramObj == undefined ? {} : paramObj;
        this.componentId = componentId;
      });
    },

    cancel() {
      console.log("this.dialogTableVisible = false");
      this.dialogTableVisible = false;
    },
    show(mapview, feature, layerView, isHighlight = true) {
      this.dialogTableVisible = false;
      this.$nextTick(() => {
        let _self = this;
        console.log(feature);
        _self.dialogTitle = feature.attributes.name;
        _self.mapview = mapview;
        _self.mapview.goTo({
          target: feature.geometry,
        });
        // 移除前一个高亮图形
        _self.highlight?.remove();
        // 高亮显示当前页要素;
        _self.highlight = layerView.highlight(feature);
        _self.paramObj = {
          feature: feature,
          featureLayer: feature.layer,
          mapclick: true,
        };
        _self.dialogTableVisible = true;
      });
    },
    closed() {
      // this.activeName = "1";
      this.$refs.mycomponent.cancel();
      this.mapview.graphics.removeAll();
      this.mapview.popup.close();
      this.highlight.remove();
    },
  },
};
</script>
<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 1vh;
}
.container {
  padding: 20px;
  height: 100%;
}
.content-row {
  margin-bottom: 1vh;
}
::v-deep .el-dialog__header {
  padding: 20px 20px 10px;
}
//::v-deep .el-descriptions__header {
// margin-bottom: 10px;
//}
.footer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}

::v-deep .el-descriptions__header {
  margin-bottom: 5px;
}

::v-deep .el-descriptions__title {
  font-size: 15px;
  color: #409eff;
}

::v-deep .el-dialog__body {
  padding: 15px;
}

// 覆盖层元素增加可穿透点击事件
::v-deep .el-dialog__wrapper {
  pointer-events: none;
}

// 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
::v-deep .el-dialog {
  pointer-events: auto;
}
</style>
